<template>
  <div class="login-container-wrapper">
    <div class="center-form-login">
      <el-form ref="loginForm" :model="loginForm" label-width="0" size="default">
        <div class="login-title">
          Emper Admin
        </div>

        <el-form-item prop="email">
          <el-input v-model="loginForm.username" placeholder="Please input email"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="Please input password"></el-input>
        </el-form-item>

        <el-button size="default" @click="submit" type="primary" class="button-login" style="width: 250px">Login
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import 'flex.css'
  import {setAuthCookie} from '../../common/js/cookie-util'
  import JSEncrypt from 'jsencrypt/bin/jsencrypt'

  export default {
    name: 'login',
    components: {},
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          key: '这里是JSEncrypt后端生成的公钥，用于非对称加密'
        }
      }
    },
    methods: {
      submit() {
        this.loginForm.password = rsaPassWord(this.loginForm.password)
        this.$http.post('', this.loginForm).then(res => {
          if (res.data.success) {
            setAuthCookie(res.data.data)
            this.$router.push({name: 'buy-order-list'})
          } else {
            alert(res.data.resultMessage)
          }
        })
      },
      rsaPassWord(password) {
        if (!password) {
          return undefined
        }
        let encryptor = new JSEncrypt()
        encryptor.setPublicKey(key)
        let rsaPassWord = encryptor.encrypt(password)
        console.log(password, rsaPassWord)
        return rsaPassWord
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  .login-container-wrapper
    position relative
    text-align center

    .center-form-login
      position fixed
      top 50%
      width 20%
      left 50%
      transform translate(-50%, -50%)

      .login-title
        margin-bottom: 40px;
        text-align: center;
        font-size: 30px;
        color: rgba(0, 0, 0, 0.65)

</style>
